<script setup>
import { ref, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
// 假设后续会创建API文件
// import { addApi, updateApi } from '@/api/stocktaking/taskdetails'

const emit = defineEmits(['refresh'])

const dialogVisible = ref(false)
const isViewMode = ref(false)

const dialogFormData = ref({
  id: null,
  category: 1,
  targetId: null,
  stocktakingTaskId: null,
  saasId: null,
  createBy: null,
  updateBy: null,
  isDel: 1
})

// 类型选项
const categoryOptions = [
  { value: 1, label: '仓库' },
  { value: 2, label: '库区' },
  { value: 3, label: '库位' }
]

// 表单验证规则
const rules = {
  category: [
    { required: true, message: '请选择类型', trigger: 'change' }
  ],
  targetId: [
    { required: true, message: '请输入目标ID', trigger: 'blur' }
  ],
  stocktakingTaskId: [
    { required: true, message: '请输入任务ID', trigger: 'blur' }
  ]
}

// 重置表单
const resetForm = () => {
  dialogVisible.value = false
  isViewMode.value = false
  dialogFormData.value = {
    id: null,
    category: 1,
    targetId: null,
    stocktakingTaskId: null,
    saasId: null,
    createBy: null,
    updateBy: null,
    isDel: 1
  }
}

// 确认提交
const confirm = async () => {
  if (isViewMode.value) {
    resetForm()
    return
  }

  // 表单验证
  if (!dialogFormData.value.category ||
    !dialogFormData.value.targetId ||
    !dialogFormData.value.stocktakingTaskId) {
    ElMessage.error('请填写必填项')
    return
  }

  try {
    // 根据是否有ID判断是新增还是更新
    // if (dialogFormData.value.id) {
    //   await updateApi(dialogFormData.value)
    // } else {
    //   await addApi(dialogFormData.value)
    // }

    ElMessage.success('操作成功')
    resetForm()
    emit('refresh')
  } catch (error) {
    ElMessage.error('操作失败: ' + error.message)
  }
}

defineExpose({
  dialogVisible,
  dialogFormData,
  isViewMode,
  resetForm
})
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="isViewMode ? '查看任务详情' : (dialogFormData.id ? '编辑任务详情' : '新增任务详情')"
    width="500px" :close-on-click-modal="false">
    <el-form :model="dialogFormData" :rules="rules" label-width="120px" :disabled="isViewMode">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="类型" prop="category">
            <el-select v-model="dialogFormData.category" placeholder="请选择类型">
              <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目标ID" prop="targetId">
            <el-input v-model.number="dialogFormData.targetId" placeholder="请输入目标ID" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务ID" prop="stocktakingTaskId">
            <el-input v-model.number="dialogFormData.stocktakingTaskId" placeholder="请输入任务ID" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Saas标识" prop="saasId">
            <el-input v-model="dialogFormData.saasId" placeholder="请输入Saas标识" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button v-if="!isViewMode" type="primary" @click="confirm">
          确定
        </el-button>
        <el-button v-else type="primary" @click="resetForm">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>